<!-- 考试记录 -->
<template>
  <div class="examRecords-page">
    <div class="card-box" v-if="list.length > 0">
      <div class="card-box-line">
        <div class="card-box-g">
          <div class="card-box-item" v-for="item in list">
            <div class="card-box-item-img">
              <img src="@/assets/img/img2.png" alt="">
            </div>
            <div class="card-box-item-content">
              <div class="card-box-item-title">{{ item.paper.title }}</div>
              <div class="card-box-item-n">题目数量：{{ item.paper.total_answer }}道</div>
              <div class="card-box-item-n">满分：{{ item.paper.total_score }}分</div>
              <div class="card-box-item-n">及格分：{{ item.paper.passing_mark }}分</div>
              <div class="card-box-item-n">考试时长：{{ getDuration(item.duration) }}</div>
              <div class="card-box-item-btns">
                <div class="card-btn" @click="handelClick(item)">考试详情</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="page" v-if="total > 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                       layout="total, prev, pager, next, sizes, jumper" :total="total" background>
        </el-pagination>
      </div>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>

<script>
import { getRecord } from "@/api";

export default {
  name: "examRecords",
  data(){
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      total: 1,
    }
  },
  mounted() {
    this.getRecordList()
  },
  methods: {
    // 获取考试记录
    getRecordList() {
      let params = {
        page: this.pageNum,
        list_rows: this.pageSize,
        paper_type: 2
      }
      getRecord(params).then(res => {
        if (res.code == 1) {
          this.list = res.data.detail.data || []
          this.total = res.data.detail.total || 0
        }
      })
    },
    // 时间计算
    getDuration(e) {
      let seconds = e
      let hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      let minutes = Math.floor(seconds / 60);
      seconds %= 60;
      let a = hours == 0 ? '00' : hours < 10 ? '0' + hours : hours
      let b = minutes == 0 ? '00' : minutes < 10 ? '0' + minutes : minutes
      let c = seconds.toFixed(0) == 0 ? '00' : seconds.toFixed(0) < 10 ? '0' + seconds.toFixed(0) : seconds.toFixed(0)
      return `${a}:${b}:${c}`
    },
    handelClick(e) {
      this.$router.push({
        path: '/examDetails',
        query: {
          paper_id: e.paper_id,
          record_id: e.record_id
        }
      })
    },

    //  分页
    handleSizeChange(e) {
      this.pageSize = e;
      this.getRecordList();
    },
    //  分页
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getRecordList();
    },
  }
}
</script>

<style lang="scss" scoped>
.examRecords-page {
  width: 100%;
  height: 100%;
  position: relative;
  .page {
    position: absolute;
    bottom: 15px;
    right: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
  }
}
</style>
